<script>
import downArrowIcon from "../assets/downArrow.svg"
import dateUtils from "@/utils/dateUtils"
import arrayUtils from "@/utils/arrayUtils"
import popupPicker from "@/components/popupPicker/index.vue"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import inputPopup from "@/components/inputPopup/inputPopup.vue"

export default {
  name: "scores",
  computed: {
    arrayUtils() {
      return arrayUtils
    },
  },
  components: { popupPicker, uniLoadMore, inputPopup },
  data() {
    return {
      searchForm: {
        year: "",
        degree_type: "1",
        special_name: "",
        recruit_type_name: "",
      },
      pagination: {
        current: 1,
        size: 10,
      },
      // 最近3年的年份
      yearList: [],
      recruitTypeList: [
        {
          value: "",
          label: "不限学制",
        },
        {
          value: "全日制",
          label: "全日制",
        },
        {
          value: "非全日制",
          label: "非全日制",
        },
      ],
      degreeTypeList: [
        {
          value: "1",
          label: "专业性硕士",
        },
        {
          value: "2",
          label: "学术性硕士",
        },
      ],
      downArrowIcon,
      universityScoreList: [],
      loadMoreStatusText: "more",
      onReachBottom: async () => {
        if (this.loadMoreStatusText === "more") {
          this.pagination.current++
          await this.getUniversityScoreList()
        }
      },
    }
  },
  props: {
    details: Object,
  },
  created() {
    // 计算最近的3年
    this.yearList = dateUtils.getPrevious20Years(3).map((item) => {
      return {
        value: item,
        label: item + "年",
      }
    })
    // 自动选中最近的一年
    this.searchForm.year = this.yearList[0].value
    this.resetPaginationGetData()
  },
  methods: {
    async getUniversityScoreList() {
      if (this.loadMoreStatusText === "loading") return
      this.loadMoreStatusText = "loading"
      const data = await request({
        url: "university/getUniversitySpecialityPage",
        data: {
          ...this.pagination,
          ...this.searchForm,
          school_id: this.details.school_id,
        },
        errorHandle: true,
      })
      this.universityScoreList = this.universityScoreList.concat(data.data)
      if (this.universityScoreList.length >= data.total) {
        this.loadMoreStatusText = "noMore"
      } else {
        this.loadMoreStatusText = "more"
      }
    },
    async resetPaginationGetData() {
      uni.showLoading({
        title: "加载中",
      })
      this.pagination.current = 1
      this.universityScoreList = []
      this.loadMoreStatusText = "more"
      await this.getUniversityScoreList()
      uni.hideLoading()
    },
  },
}
</script>

<template>
  <view class="component">
    <view class="filter-bar">
      <!--			年份选择器-->
      <view class="filter-item" @click="$refs.yearPicker.open()">
        <text>{{ searchForm.year }}年</text>
        <image class="icon" :src="downArrowIcon"></image>
      </view>
      <!--			学制-->
      <view class="filter-item" @click="$refs.recruitTypePicker.open()">
        <text>{{ arrayUtils.getLabelByValue(recruitTypeList, searchForm.recruit_type_name) }}</text>
        <image class="icon" :src="downArrowIcon"></image>
      </view>
      <!--硕士类型-->
      <view class="filter-item" @click="$refs.degreeTypePicker.open()">
        <text>{{ arrayUtils.getLabelByValue(degreeTypeList, searchForm.degree_type) }}</text>
        <image class="icon" :src="downArrowIcon"></image>
      </view>
      <!--专业-->
      <view class="filter-item" @click="$refs.majorInputPopup.open()">
        <text>{{ searchForm.special_name ? searchForm.special_name : "不限专业" }}</text>
        <image class="icon" :src="downArrowIcon"></image>
      </view>
    </view>
    <popupPicker
      ref="recruitTypePicker"
      :picker-option-list="recruitTypeList"
      v-model="searchForm.recruit_type_name"
      @change="resetPaginationGetData"
    ></popupPicker>
    <popupPicker ref="yearPicker" :picker-option-list="yearList" v-model="searchForm.year" @change="resetPaginationGetData"></popupPicker>
    <popupPicker
      ref="degreeTypePicker"
      :picker-option-list="degreeTypeList"
      v-model="searchForm.degree_type"
      @change="resetPaginationGetData"
    ></popupPicker>
    <inputPopup
      ref="majorInputPopup"
      v-model="searchForm.special_name"
      placeholder="请输入专业进行查询"
      @submit="resetPaginationGetData"
    ></inputPopup>

    <view class="university-score-list">
      <view class="item" v-for="(item, index) in universityScoreList" :key="index">
        <view class="header">
          <!--					专业名称-->
          <view class="major-name">{{ item.special_name }}</view>
        </view>
        <!--				学制、硕士类型和专业代码-->
        <view class="degreeType-majorCode">
          <!--					年份-->
          <text>{{ item.year }}年</text>
          <text style="margin: 0 10rpx">|</text>
          <!--					学制-->
          <text>{{ item.recruit_type_name }}</text>
          <text style="margin: 0 10rpx">|</text>
          <text v-if="item.degree_type === 1">专业型硕士</text>
          <text v-else-if="item.degree_type === 2">学术性硕士</text>
          <text style="margin: 0 10rpx">|</text>
          <text>专业代码：{{ item.special_code }}</text>
        </view>
        <!--				所属院系 / 研究方向 / 招生人数-->
        <view class="subject-score-list">
          <view class="item" style="width: 40%">
            <view class="label">所属院系</view>
            <view class="value">{{ item.depart_name }}</view>
          </view>
          <view class="item" style="width: 40%">
            <view class="label">研究方向</view>
            <view class="value">{{ item.research_area }}</view>
          </view>
          <view class="item" style="width: 20%">
            <view class="label">招生人数</view>
            <view class="value">{{ item.recruit_number }}</view>
          </view>
        </view>
        <!--				备注-->
        <view class="note" v-if="item.note">备注：{{ item.note }}</view>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  //height: 100%;
  //display: flex;
  //flex-direction: column;
  > .filter-bar {
    display: flex;
    background: white;
    padding: 20rpx;
    border-radius: 20rpx;
    position: sticky;
    top: 0;
    left: 0;
    width: calc(100vw - 40rpx);
    margin: 0 20rpx;
    > .filter-item {
      width: 0;
      flex: 1;
      background: var(--theme-color-light);
      padding: 10rpx;
      border-radius: 10rpx;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-right: 20rpx;
      }
      > text {
        width: 0;
        flex: 1;
        color: var(--text-color-light);
        // 文本溢出自动加省略号
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      > .icon {
        width: 28rpx;
        height: 28rpx;
      }
    }
  }
  //> .scroll-view {
  //  height: 100%;
  //  padding-bottom: env(safe-area-inset-bottom);
  //}
  > .university-score-list {
    padding: 20rpx;
    > .item {
      background: white;
      border-radius: 20rpx;
      padding: 20rpx;
      &:not(:last-child) {
        margin-bottom: 20rpx;
      }
      > .header {
        > .major-name {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      > .degreeType-majorCode {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: var(--text-color-light);
      }
      > .subject-score-list {
        background: var(--theme-color-light);
        margin-top: 20rpx;
        border-radius: 20rpx;
        padding: 20rpx;
        display: flex;
        > .item {
          > .label {
            color: var(--text-color-light);
            font-size: 26rpx;
            text-align: center;
          }
          > .value {
            font-size: 28rpx;
            text-align: center;
            // 文本溢出自动换行
            word-wrap: break-word;
            margin-top: 20rpx;
          }
        }
      }
      > .note {
        margin-top: 20rpx;
        font-size: 28rpx;
        width: 100%;
        // 文本溢出自动换行
        word-wrap: break-word;
        color: var(--text-color-light);
      }
    }
  }
}
</style>
